<!-- html代码  -->
<template>
  <div>
    <!-- 1.提供地图容器 -->
    <div ref="map" style="height: 100%"></div>
  </div>
</template>
    <script>
import { get } from "@/utils/request";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      // 存放设备信息数组
      empData: [],
    };
  },
  computed: {
    ...mapState(["ed"]),
  },
  methods: {
    ...mapMutations(["SET_ED"]),
    // 封装加载地图方法
    loadMap() {
      AMapLoader.load({
        key: "a9bfe3244c5b76090c50c714c2593af1", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          var map = new AMap.Map(this.$refs.map, {
            pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
            viewMode: "3D", //地图模式
            rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
            pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
            zoom: 3, //初始化地图层级
            rotation: -15, //初始地图顺时针旋转的角度
            center: [103.828434, 36.064822], //初始地图中心经纬度
            // 设置地图样式
            // mapStyle: "amap://styles/whitesmoke",
          });
          this.empData.forEach((item) => {
            // 添加标记点  设备点 经纬度
            const marker = new AMap.Marker({
              position: item.position,
              // offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
              title: item.name,
              // 用户携带数据
              extData: item,
              // 自定义图标
              // icon:"图标地址"
            });
            var that = this;
            // 给标记点绑定事件
            marker.on("click", function () {
              // this--->指向点击标记点 指向的不是vue实例
              console.log(this.getExtData(), "获取用户携带数据");
              that.SET_ED({
                device_id: this.getExtData().id,
                engineer_id: this.getExtData().engineer_id,
              });
            });
            // 将标记点添加到高德地图
            map.add(marker);
          });

          // 行政区规划
          AMap.plugin("AMap.DistrictSearch", function () {
            let polygons = [];
            var opts = {
              subdistrict: 0, //获取边界不需要返回下级行政区
              extensions: "all", //返回行政区边界坐标组等具体信息
              level: "district", //查询行政级别为 市
            };
            let district = new AMap.DistrictSearch(opts);
            district.setExtensions("all");
            district.search("兰州市", function (status, result) {
              map.remove(polygons); //清除上次结果
              polygons = [];
              var bounds = result.districtList[0].boundaries;
              if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  var polygon = new AMap.Polygon({
                    strokeWeight: 5,
                    path: bounds[i],
                    fillOpacity: 0.4,
                    fillColor: "#80d8ff",
                    strokeColor: "#0091ea",
                  });
                  polygons.push(polygon);
                }
              }
              map.add(polygons);
              map.setFitView(polygons); //视口自适应
            });
          });
        })
        .catch((e) => {
          // console.error(e); //加载错误提示
          return Promise.reject(e);
        });
    },
    // 请求工程设备数据
    async loadEmpData() {
      let res = await get("/dashboard/findEngineerDeviceTree");
      // {data:[{children:[{}]},{},{},{}]}
      // children里面对象存放的是设备信息 获取五个设备 将其动态加载到地图中
      let temp = []; //存放所有设备对象的数组
      res.data.forEach((item, index, arr) => {
        if (item.children.length > 0) {
          item.children.forEach((it) => {
            temp.push(it);
          });
        }
      });
      console.log(temp, "22222");
      this.empData = temp;
    },
  },
  async mounted() {
    await this.loadEmpData();
    this.loadMap();
  },
};
</script>
    <!-- css代码 -->
    <style lang="less" scoped></style>
    